<template>
    <div class="topbar">
        <div class="wrap">
            <div class="l">欢迎来到叩丁狼积分商城</div> 
            <div class="r">
                <ul>
                    <li @click="hdClick">
                        <img :src="userInfo.headImg" alt="">
                        用户名：{{ userInfo.nickName }}
                    </li>
                    <li>我的积分: {{ userInfo.coin }}</li>
                    <li>获取积分</li>
                    <li>叩丁狼官网</li>
                    <li class="btn" @click="chanIsShowLoginModal(true)" v-show="!isLogined">登录</li>
                    <li class="btn cart-btn" v-show="isLogined">
                        <img src="@/assets/img/cart.png" alt="">
                        <span>购物车</span>
                        <b>{{ cartTotal }}</b>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import { mapMutations, mapState, mapActions } from 'vuex';
import {WeixinLoginApI} from '@/repuest/api'
export default {
    data () {
        return {
            
            
        }
    },
    watch: {
        "$route.path" : {
            handler(newVal, oldVal) {
                // console.log(newVal, oldVal);
                let mytoken = localStorage.getItem("x-auth-token");
                this.chanIsLogined(Boolean(mytoken));
                if(mytoken) {
                    this.asyncChanUserInfo();
                }else {
                    // 没有登录的情况，把用户数据初始化
                    this.initUserInfo();
                }
            }
        }
    },
     created() {
        this.$nextTick().then(async () => {
            // 判断地址栏有没有code
            let mycode = this.$route.query.code;
            
            if(mycode) {
                // 发起微信扫码登录的请求
                let res = await WeixinLoginApI({
                    code: mycode
                });
                // 针对三种情况做不同的处理
                if(res.code == 0) {
                    // 1.提示登录成功
                    this.asyncChanIsShowToast({
                            msg: "微信扫码登录成功",
                            type: "success"
                    });
                    // 2.保存token值
                    localStorage.setItem("x-auth-token",res["x-auth-token"])
                    // 3.登录状态的切换
                    this.chanIsLogined(true);
                    // 4.登录成功之后，删除uuid和地址栏上的code
                    this.$router.push(this.$route.path);
                    localStorage.removeItem("uuid");

                    // 登录成功，发起获取用户信息请求
                    this.asyncChanUserInfo();
                }else if(res.code == 400) {
                    // code失效的情况

                    // 1.提示用户重新扫二维码
                    this.asyncChanIsShowToast({
                        msg: "code失效，请重新扫码登录",
                        type: "warn"
                    });
                    // 2.把登录框打开
                    this.chanIsShowLoginModal(true);
                }else if(res.code == 407) {
                    // console.log(res);
                    // 这个微信号，在这个网上还没有绑定手机号
                    // 绑定手机号，这么绑定手机号？？
                    // 就让用户重新用手机号登录，而我们的登录接口调用的应该是  手机绑定微信 的接口（带上uuid ）

                    // 1.提示用户手机号绑定微信
                    this.asyncChanIsShowToast({
                        msg: "请用手机号绑定登录微信",
                        type: "warn"
                    });
                    // 2.把登录框打开
                    this.chanIsShowLoginModal(true);
                    // 3.保存uuid到本地存储
                    localStorage.setItem("uuid", res.uuid);
                }
            } else {
                let mytoken = localStorage.getItem("x-auth-token");
                this.chanIsLogined(Boolean(mytoken));
                if(mytoken) {
                    this.asyncChanUserInfo();
                }else {
                    // 没有登录的情况，把用户数据初始化
                    this.initUserInfo();
                }
            }
          
        })
        
    },
    computed: {
        ...mapState({
            isLogined: state => state.loginStatus.isLogined,
            cartTotal: state => state.userInfo.cartTotal,
            userInfo: state => state.userInfo.userInfo
        })
    },
    methods: {
        ...mapMutations({
            chanIsShowLoginModal: "showLoginModal/chanIsShowLoginModal",
            chanIsShowToast: "toastStatus/chanIsShowToast",
            chanIsLogined: "loginStatus/chanIsLogined",
            initUserInfo: "userInfo/initUserInfo"
        }),
        ...mapActions({
            asyncChanIsShowToast: "toastStatus/asyncChanIsShowToast",
            asyncChanUserInfo: "userInfo/asyncChanUserInfo"
        }),
        hdClick() {
            /* this.chanIsShowToast({
                isShow: true,
                msg: "请先登录",
                // type表示3种状态：成功(success),警告(warn),失败(fail)
                type: "success"
            });

            setTimeout(() => {
                this.chanIsShowToast({
                isShow: false,
                msg: "请先登录",
                type: "success"
            });
            }, 1500); */
            this.asyncChanIsShowToast({
                msg: "请先登录",
                type: "warn"
            });
        }
    }
}
</script>
 
<style lang = "less" scoped>
@import "../assets/css/public.less" ;
    .topbar {
        height: 40px;
        background: #242B39;
        color: #fff;
        font-size: 14px;
        .wrap {
            display: flex;
            justify-content: space-between;
            line-height: 40px;
            .r ul{
                display: flex;
              
                li {
                    display: flex;
                    align-items: center;
                    margin-left: 20px;
                    cursor: pointer;
                    img {
                        width: 26px;
                        height: 26px;
                        border-radius: 50%;
                        margin-right: 8px;
                    }
                    &.btn {
                        width: 124px;
                        height: 40px;
                        background: @base-color;
                        justify-content: center;
                    }
                    &.cart-btn {
                        b {
                            width: 22px;
                            height: 22px;
                            background: #FD604D;
                            border-radius: 11px;
                            margin-left: 5px;
                            line-height: 22px;
                            text-align: center;
                            color: #ccc;
                        }
                        
                    }
                }
                
            }
        }
    }
</style>